<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta charset="UTF-8">
    <title>峰尚视野</title>
    <!-- libs css-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/tool.css">
    <!-- libs js -->
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.ba-hashchange.js"></script>
    <script src="js/onePage.js"></script>
    <script src="js/tool.js"></script>
    <script src="js/base.js"></script>

    <!-- style -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/media.css">

    <!-- 写博客的填标题&发送文章 -->
    <link rel="stylesheet" href="css/blog_edit.css">

    <!-- 开源mkdown -->
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="./editor.md/css/editormd.min.css">
    <script src="./editor.md/js/jquery.min.js"></script>
    <script src="./editor.md/lib/marked.min.js"></script>
    <script src="./editor.md/lib/prettify.min.js"></script>
    <script src="./editor.md/editormd.min.js"></script>

</head>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Background</title>
    <style>
        body {
            background-image: url('images/shot.png'); /* 图像背景 */
            background-size: cover; /* 图像覆盖整个背景 */
            background-repeat: no-repeat; /* 图像不重复 */
            background-position: center; /* 图像居中 */
            height: 100vh; /* 设置高度为视口高度 */
            margin: 0; /* 移除默认边距 */
            color: black; /* 文字颜色 */
        }
    </style>
</head>


<body>
<!-- 头部 -->
<div class="header">
    <div class="container header-all phone">
        <div class="logo"><img src="images/logo.png"/></div>
        <div class="phone-show" id="phone-show">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <ul class="nav" id="header-nav">
            <li><a href="index.html" class=""><i class="iconfont">&#xe6cb;</i>首页</a></li>
            <li><a href="blog_write.html" class=""><i class="iconfont">&#xe690;</i>创作文章</a></li>
        </ul>
    </div>
</div>


<!-- 编辑框容器 -->
<div class="blog-edit-container">
    <!-- 标题编辑区 -->
    <div class="title">
        <input type="text" placeholder="在这里写下文章标题" id="title">
        <button id="submit">发布文章</button>
    </div>
    <!-- 创建编辑器标签 -->
    <div id="editor"></div>
</div>

<script>
    // 初始化编辑器
    var editor = editormd("editor", {
        width: "100%",
        height: "500",
        markdown: "# 关注",
        path: "editor.md/lib/", // 确保路径正确
        saveHTMLToTextarea: true // 将生成的HTML保存到textarea中
    });

    document.getElementById('submit').addEventListener('click', function(event) {
        event.preventDefault(); // 阻止默认行为

        // 获取文章标题
        var title = document.getElementById('title').value.trim();
        
        // 检查是否填写了标题
        if (!title) {
            alert("请填写文章标题！");
            return;
        }

        // 获取渲染后的HTML内容
        var content = editor.getHTML().trim();

        // 检查是否填写了内容
        if (!content) {
            alert("请填写文章内容！");
            return;
        }

        // 准备POST请求的数据
        const formData = new FormData();
        formData.append('title', title);
        formData.append('content', content);

        // 使用fetch API发送数据到CGI程序
        fetch('cgi_sql/blog_w_to_sql.cgi', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
            alert('文章已成功发布！');
        })
        .catch((error) => {
            console.error('Error:', error);
            alert('文章发布失败，请重试。' + error);
        });
    });
</script>

<!-- 底部 -->
<div class="footer">
    Design by <a href="#">峰尚视野</a>
    <br>&copy; 2022 - 峰尚视野 <a href="#">蜀ICP备18007506号</a>
</div>
<!-- 侧边栏 -->
<div class="ce">
    <a class="ceL" href="javascript:;" title="返回顶部"><i class="iconfont top">&#xe65b;</i></a>
</div>
<!-- loading -->
<div class="loading" id="Loading">
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>

</body>
</html>